// 图片懒加载功能
// 封装监听目标元素进入视口的通用逻辑
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
export default {
  install (app) {
    app.directive('lazyLoad', (el, binding) => {
      // stop 是一个可执行的方法 调用就会停止监听
      // 不管元素进入还是离开视口区域都不会再执行回调函数
      // 注意：不会只监听一次  只有进入视口或者离开视口回调函数都会执行
      const { stop } = useIntersectionObserver(
        // 监听目标元素
        el,
        ([{ isIntersecting }], observerElement) => {
          // isIntersecting 布尔值 代表当前监听的元素是否进入视口区域

          // ...判断  一旦为true 就发送ajax
          if (isIntersecting) {
            // console.log(binding)
            // console.log(el)
            el.onerror = () => {
              el.src = defaultImg
            }

            // 发起网络请求
            el.src = binding.value

            // 请求数据完毕停止监听
            stop()
          }
        }
      )
    })
  }
}
